<template>
  <div>
    <el-form :inline="true" :model="form">
      <el-form-item label="类型">
        <el-select v-model="form.category" placeholder="类型">
          <el-option label="全部" value=""></el-option>
          <template v-for="c in category">
            <el-option
              :key="c.id"
              :label="c.category_name"
              :value="c.id"
            ></el-option>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item label="时间">
        <el-date-picker
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="form.startTime"
          type="datetime"
          placeholder="开始时间"
          align="right"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="-">
        <el-date-picker
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="form.endTime"
          type="datetime"
          placeholder="结束时间"
          align="right"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="关键字">
        <el-select v-model="form.searchKey" placeholder="关键字">
          <el-option label="无" value=""></el-option>
          <template v-for="c in searchKey">
            <el-option
              :key="c.value"
              :label="c.label"
              :value="c.value"
            ></el-option>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.searchValue" placeholder="关键字"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="showAddInfoDialog">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" v-loading="loading" stripe>
      <el-table-column type="selection"> </el-table-column>
      <el-table-column prop="id" label="id"> </el-table-column>
      <el-table-column prop="title" label="标题"> </el-table-column>
      <el-table-column
        prop="categoryId"
        label="类别"
        :formatter="formatCategory"
      >
      </el-table-column>
      <el-table-column prop="createDate" label="日期" :formatter="formatDate"/>
      <el-table-column prop="option" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="showEditInfoDialog(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteItem(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :page-sizes="[10, 20, 30, 40]"
      layout="sizes, prev, pager, next"
      :current-page="tableCurrentPage"
      :page-size="tablePageSize"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
    <InfoDialog :flag.sync="dialog.infoDialogShow" :category="category" :module="dialog.module" :item="dialog.item"/>
  </div>
</template>

<script>
import { getInfoList, deleteInfo } from "../../api/info";
import { formatDate } from "../../utils/date";
import InfoDialog from "./dialog/Index";
export default {
  components: { InfoDialog },
  data: () => {
    return {
      form: {
        category: "",
        startTime: "",
        endTime: "",
        searchKey: "",
        searchValue: ""
      },
      searchKey: [
        {
          label: "ID",
          value: "id"
        },
        {
          label: "标题",
          value: "title"
        }
      ],
      loading: false,
      tableCurrentPage: 1,
      tablePageSize: 10,
      tableData: [],
      total: 0,
      dialog: {
        infoDialogShow: false,
        module: "create",
        item: undefined
      }
    };
  },
  computed: {
    category() {
      return this.$store.getters.category;
    }
  },
  methods: {
    formatDate(row, column, cell) {
      return formatDate(cell);
    },
    formatCategory(row, column, cell) {
      let category = this.category.find(item => item.id == cell);
      if (category) {
        return category.category_name;
      }
      return cell;
    },
    getCategory() {
      this.$store.dispatch("getCategory");
    },
    search() {
      this.getInfoList();
    },
    getInfoList() {
      this.loading = true;
      let param = {
        categoryId: this.form.category,
        startTime: this.form.startTime,
        endTime: this.form.endTime,
        title: this.form.searchKey == 'title'?this.form.searchValue:'',
        id: this.form.searchKey == 'id'?this.form.searchValue:'',
        pageNumber: this.tableCurrentPage,
        pageSize: this.tablePageSize
      };
      getInfoList(param).then(res => {
        this.tableData = res.data.data;
        this.total = res.data.total;
      });
      this.loading = false;
    },
    handleSizeChange(val) {
      this.tablePageSize = val;
      this.getInfoList();
    },
    handleCurrentChange(val) {
      this.tableCurrentPage = val;
      this.getInfoList();
    },
    showAddInfoDialog() {
      this.dialog.infoDialogShow = true;
      this.dialog.module = "create";
      this.dialog.item = undefined;
    },
    showEditInfoDialog(row) {
      this.dialog.infoDialogShow = true;
      this.dialog.module = "edit";
      this.dialog.item = row;
    },
    deleteItem(row) {
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let param = { id: new Array(row.id) };
          deleteInfo(param).then(res => {
            this.$message({
              type: "success",
              message: res.message
            });
            this.getInfoList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  mounted() {
    this.getCategory();
    this.getInfoList();
  }
};
</script>

<style scoped></style>
